<template>
    <!-- 科目明细 table -->
    <hsTableV2 isMultistageHeader :columns="tableData.cloumns" :data="tableData.data" :expendList="expandedRowKeys" isTree
        fixed expandColumnKey="id" :multistageHeaderData="multistageData">
        <!-- <template #headerSlot="props">
            <CustomizedHeader v-bind="props" />
        </template> -->
    </hsTableV2>
</template>

<script setup lang="jsx">
import { ref, reactive, computed, watch } from 'vue'
import detailApi from '@/api/SelfSupport/detailPages'
import { toThousands } from '@/utils/number-util'

const props = defineProps({
    biProjectCode: {
        type: String,
        required: true,
        default: ''
    },
    yearmonth: {
        type: String,
        required: true,
        default: ''
    },
    isFresh: {
        type: String,
        required: true,
        default: ''
    }
})

let multistageData = {}
const initMultistageData = () => {
    const year = props.yearmonth.split('-')[0]
    let month = props.yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''
    multistageData['multCol2'] = {
        key: 'multCol2',
        title: `${year}年${month}月`,
        childrenIndex: [2, 3, 4, 5, 6]
    }
    multistageData['multCol7'] = {
        key: 'multCol7',
        title: `${year}年1-${month}月`,
        childrenIndex: [7, 8, 9, 10, 11]
    }
    multistageData['multCol12'] = {
        key: 'multCol12',
        title: `${year}年度`,
        childrenIndex: [12, 13, 14]
        // childrenIndex: [12, 13, 14, 15]
    }
}
initMultistageData()

const windowWidth = document.documentElement.scrollWidth;
const celWidth = (windowWidth - 138 - 300) / 13
let tableData = reactive({
    loading: false,
    data: [],
    cloumns: [
        {
            key: "id",
            dataKey: "id",
            title: "序号",
            align: "left",
            width: 100,
        },
        {
            key: "subjectName",
            dataKey: "subjectName",
            title: "科目",
            width: 200,
            align: "left",
            indentKey: 'level', // 设置缩进字段
            // flexGrow: 1,
            // minWidth: 200,
            cellRenderer: ({ rowData }) => (
                <div style={{ display: 'flex' }}>
                    <div style={{ width: `${12 * (rowData.level - 1)}px` }}></div>
                    <div>{rowData.subjectName}</div>
                </div>
            )
        },
        // 当前月份
        {
            key: "monthBudget",
            dataKey: "monthBudget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthBudgetYuan)} placement="top">{toThousands(rowData.monthBudget)}</ElTooltip>
            )
        },
        {
            key: "monthActual",
            dataKey: "monthActual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthActualYuan)} placement="top">{toThousands(rowData.monthActual)}</ElTooltip>
            )
        },
        {
            key: "monthPc",
            dataKey: "monthPc",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.monthPc2}%`} placement="top">{`${rowData.monthPc == '-' ? '-' : rowData.monthPc + '%'}`}</ElTooltip>
            )
        },
        {
            key: "monthBreachValue",
            dataKey: "monthBreachValue",
            title: "缺口",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthBreachValueYuan)} placement="top">{toThousands(rowData.monthBreachValue)}</ElTooltip>
            )
        },
        {
            key: "yearErlier",
            dataKey: "yearErlier",
            title: "同比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.yearErlier2}%`} placement="top">{`${rowData.yearErlier == '-' ? '-' : rowData.yearErlier + '%'}`}</ElTooltip>
            )
        },
        // 1-当前月
        {
            key: "accMonthBudget",
            dataKey: "accMonthBudget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.accMonthBudgetYuan)} placement="top">{toThousands(rowData.accMonthBudget)}</ElTooltip>
            )
        },
        {
            key: "accMonthActual",
            dataKey: "accMonthActual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.accMonthActualYuan)} placement="top">{toThousands(rowData.accMonthActual)}</ElTooltip>
            )
        },
        {
            key: "accMonthPc",
            dataKey: "accMonthPc",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.accMonthPc2}%`} placement="top">{`${rowData.accMonthPc == '-' ? '-' : rowData.accMonthPc + '%'}`}</ElTooltip>
            )
        },
        {
            key: "accMonthBreachValue",
            dataKey: "accMonthBreachValue",
            title: "缺口",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.accMonthBreachValueYuan)} placement="top">{toThousands(rowData.accMonthBreachValue)}</ElTooltip>
            )
        },
        {
            key: "accYearErlier",
            dataKey: "accYearErlier",
            title: "同比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.accYearErlier2}%`} placement="top">{`${rowData.accYearErlier == '-' ? '-' : rowData.accYearErlier + '%'}`}</ElTooltip>
            )
        },
        // 本年度
        {
            key: "yearBudget",
            dataKey: "yearBudget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.yearBudgetYuan)} placement="top">{toThousands(rowData.yearBudget)}</ElTooltip>
            )
        },
        {
            key: "year_forecast",
            dataKey: "year_forecast",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.year_forecast_yuan)} placement="top">{toThousands(rowData.year_forecast)}</ElTooltip>
            )
        },
        {
            key: "year_pc",
            dataKey: "year_pc",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.year_pc_2}%`} placement="top">{`${rowData.year_pc == '-' ? '-' : rowData.year_pc + '%'}`}</ElTooltip>
            )
        },
        // {
        //     key: "year_breach_value",
        //     dataKey: "year_breach_value",
        //     title: "缺口",
        //     align: "right",
        //     width: celWidth,
        //     parentKey: 'multCol12',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={toThousands(rowData.year_breach_value_yuan)} placement="top">{toThousands(rowData.year_breach_value)}</ElTooltip>
        //     )
        // },
    ],
})


const biProjectCode = computed(() => {
    return props.biProjectCode
});
const yearmonth = computed(() => {
    return props.yearmonth
});
const isFresh = computed(() => {
    return props.isFresh
});
watch([biProjectCode, yearmonth, isFresh], () => {
    initMultistageData()
    getList()
}, { deep: true });

let expandedRowKeys = ref([])
const convertToFlatArray = (arr) => {
    arr.map(item => {
        // item.lastStage = item.children ? 0 : 1 // 设置:是否为最后一级
        item.lastStage = 0 // 设置:是否为最后一级
        item.curParentIndex = item.id.split('.')[0] - 1 // 设置统一的第一级index， 用于斑马纹
        item.level == 1 || item.level ==  2 ? expandedRowKeys.value.push(item.id) : '' // 第一级 第二级 默认展开
        if (Array.isArray(item.children)) {
            convertToFlatArray(item.children);
        }
        return item
    })
}

const getList = () => {
    tableData.loading = true
    detailApi.subjectDetailApi({ biProjectCode: props.biProjectCode, yearmonth: props.yearmonth }).then((res) => {
        if (res.data.code == 200) {
            convertToFlatArray(res.data.data)
            tableData.data = res.data.data
            tableData.loading = false
        }
    })
}
getList()
</script>

<style scoped lang="scss"></style>



<!-- 下面是不用组件写的方式 备份一下 -->
<!-- <template>
    <el-auto-resizer>
        <template #default="{ height, width }">
            <el-table-v2 ref="tableRefSubject" :default-expanded-row-keys="expandedRowKeys" :expand-column-key="expandColumnKey"
                v-loading="tableData.loading" class="zs-el-table-v2" :row-height="36" :header-height="72"
                :row-class="tableData.rowClass" header-class="zs-el-table-v2-header" :columns="tableData.cloumns"
                :data="tableData.data" :width="width" :height="height" fixed>
                <template #header="props">
                    <CustomizedHeader v-bind="props" />
                </template>
            </el-table-v2>
        </template>
    </el-auto-resizer>
</template>

<script setup lang="jsx">
import { ref, reactive, computed, watch } from 'vue'
import detailApi from '@/api/SelfSupport/detailPages'
import { toThousands } from '@/utils/number-util'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    biProjectCode: {
        type: String,
        required: true,
        default: ''
    },
    yearmonth: {
        type: String,
        required: true,
        default: ''
    },
    isFresh: {
        type: String,
        required: true,
        default: ''
    }
})
let expandedRowKeys = ref([])



const biProjectCode = computed(() => {
    return props.biProjectCode
});
const yearmonth = computed(() => {
    return props.yearmonth
});
const isFresh = computed(() => {
    return props.isFresh
});
watch([biProjectCode, yearmonth, isFresh], () => {
    getList()
}, { deep: true });


// 设置虚拟表格滚动
const tableRefSubject = ref()
watch(() => router.currentRoute.value, () => {
    tableRefSubject.value?.scrollToTop(0)
})

const expandColumnKey = 'id'
let tableData = reactive({
    loading: false,
    data: [],
    total: 0,
    cloumns: [
        {
            key: "id",
            dataKey: "id",
            title: "序号",
            align: "left",
            width: 200,
            cellRenderer: ({ rowData }) => (
                <span class={rowData.children ? '' : 'zs-text-gray'}>{rowData.id}</span>
            )
        },
        {
            key: "subjectName",
            dataKey: "subjectName",
            title: "科目（万元，不含税）",
            width: 250,
            align: "left",
            cellRenderer: ({ rowData }) => (
                <div style={{ display: 'flex' }}>
                    <div style={{ width: `${12 * (rowData.level - 1)}px` }}></div>
                    <div>{rowData.subjectName}</div>
                </div>
            )
        },
        // 当前月份
        {
            key: "monthBudget",
            dataKey: "monthBudget",
            title: "预算",
            align: "right",
            width: (windowWidth - 138 - 250) / 14,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthBudgetYuan)} placement="top">{toThousands(rowData.monthBudget)}</ElTooltip>
            )
        },
        {
            key: "monthActual",
            dataKey: "monthActual",
            title: "实际",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthActualYuan)} placement="top">{toThousands(rowData.monthActual)}</ElTooltip>
            )
        },
        {
            key: "monthPc",
            dataKey: "monthPc",
            title: "完成率",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.monthPc2}%`} placement="top">{`${rowData.monthPc == '-' ? '-' : rowData.monthPc+'%'}`}</ElTooltip>
            )
        },
        {
            key: "monthBreachValue",
            dataKey: "monthBreachValue",
            title: "缺口",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthBreachValueYuan)} placement="top">{toThousands(rowData.monthBreachValue)}</ElTooltip>
            )
        },
        {
            key: "yearErlier",
            dataKey: "yearErlier",
            title: "同比",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.yearErlier2}%`} placement="top">{`${rowData.yearErlier == '-' ? '-' : rowData.yearErlier+'%'}`}</ElTooltip>
            )
        },
        // 1-当前月
        {
            key: "accMonthBudget",
            dataKey: "accMonthBudget",
            title: "预算",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.accMonthBudgetYuan)} placement="top">{toThousands(rowData.accMonthBudget)}</ElTooltip>
            )
        },
        {
            key: "accMonthActual",
            dataKey: "accMonthActual",
            title: "实际",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.accMonthActualYuan)} placement="top">{toThousands(rowData.accMonthActual)}</ElTooltip>
            )
        },
        {
            key: "accMonthPc",
            dataKey: "accMonthPc",
            title: "完成率",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.accMonthPc2}%`} placement="top">{`${rowData.accMonthPc == '-' ? '-' : rowData.accMonthPc+'%'}`}</ElTooltip>
            )
        },
        {
            key: "accMonthBreachValue",
            dataKey: "accMonthBreachValue",
            title: "缺口",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.accMonthBreachValueYuan)} placement="top">{toThousands(rowData.accMonthBreachValue)}</ElTooltip>
            )
        },
        {
            key: "accYearErlier",
            dataKey: "accYearErlier",
            title: "同比",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.accYearErlier2}%`} placement="top">{`${rowData.accYearErlier == '-' ? '-' : rowData.accYearErlier+'%'}`}</ElTooltip>
            )
        },
        // 本年度
        {
            key: "yearBudget",
            dataKey: "yearBudget",
            title: "预算",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.yearBudgetYuan)} placement="top">{toThousands(rowData.yearBudget)}</ElTooltip>
            )
        },
        {
            key: "year_forecast",
            dataKey: "year_forecast",
            title: "实际",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.year_forecast_yuan)} placement="top">{toThousands(rowData.year_forecast)}</ElTooltip>
            )
        },
        {
            key: "year_pc",
            dataKey: "year_pc",
            title: "完成率",
            align: "right",
            width: 140,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.year_pc_2}%`} placement="top">{`${rowData.year_pc == '-' ? '-' : rowData.year_pc+'%'}`}</ElTooltip>
            )
        },
        {
            key: "year_breach_value",
            dataKey: "year_breach_value",
            title: "缺口",
            align: "right",
            width: 160,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.year_breach_value_yuan)} placement="top">{toThousands(rowData.year_breach_value)}</ElTooltip>
            )
        },
    ],
    rowClass: ({ rowData }) => {
        if ((rowData.id.split('.')[0]) % 2 == 0) {
            return "zs-el-table-row-gray";
        }
    },
});

const CustomizedHeader = ({ cells, columns, headerIndex }) => {
    console.log(headerIndex)
    const year = props.yearmonth.split('-')[0]
    let month = props.yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1,2) : ''

    const groupCells = [];
    for (let i = 0, len = columns.length; i < len; i++) {
        if (i == 2 || i == 7) {
            const title = i == 2 ? `${year}年${month}月` : `${year}年1-${month}月`
            const width = cells[i].props.column.width + cells[i + 1].props.column.width + cells[i + 2].props.column.width + cells[i + 3].props.column.width + cells[i + 4].props.column.width;
            groupCells.push(
                <div style={{ width: `${width}px`, borderLeft: '1px solid #ffffff', borderRight: '1px solid #ffffff', }}>
                    <div style={{ width: `${width}px`, height: '36px', background: '#f5f4f5', borderRight: '1px solid #ffffff', borderBottom: '1px solid #ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{title}</div>
                    <div style="display:flex; height: 36px">{cells[i]}{cells[i + 1]}{cells[i + 2]}{cells[i + 3]}{cells[i + 4]}</div>
                </div >)
            i = i + 4
        } else if (i == 12) {
            const title = `${year}年度`
            const width = cells[i].props.column.width + cells[i + 1].props.column.width + cells[i + 2].props.column.width + cells[i + 3].props.column.width;
            groupCells.push(
                <div style={{ width: `${width}px`, borderLeft: '1px solid #ffffff', borderRight: '1px solid #ffffff', }}>
                    <div style={{ width: `${width}px`, height: '36px', background: '#f5f4f5', borderRight: '1px solid #ffffff', borderBottom: '1px solid #ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{title}</div>
                    <div style="display:flex; height: 36px">{cells[i]}{cells[i + 1]}{cells[i + 2]}{cells[i + 3]}</div>
                </div >)
            i = i + 3
        }
        else { groupCells.push(cells[i]) }
    }
    return groupCells;
}
const getList = () => {
    tableData.loading = true
    detailApi.subjectDetailApi({ biProjectCode: props.biProjectCode, yearmonth: props.yearmonth }).then((res) => {
        if (res.data.code == 200) {
            tableData.data = res.data.data
            tableData.loading = false
            res.data.data.map(item => {
                expandedRowKeys.value.push(item.id)
                if (item.children) {
                    item.children.map(child => {
                        expandedRowKeys.value.push(child.id)
                    })
                }
            })
        }
    })
}
getList()
</script>

<style scoped lang="scss"></style> -->
